<template>
  <!-- 上传图片和预览样式 -->
  <div v-if="uploadImgShowHide" class="upload_container">
    <div class="uploadBox">
      <div class="uploadStyle">
        <h3>装修前全景图</h3>
        <el-input
          style="margin-bottom: 20px; width: 200px"
          v-model="imgDescription1"
          placeholder="输入图片描述"
        />
        <img class="imgStyle" :src="imagePath1" alt="" />
        <input type="file" @change="uploadImage1" />
      </div>
      <div class="uploadStyle">
        <h3>装修后全景图</h3>
        <el-input
          style="margin-bottom: 20px; width: 200px"
          v-model="imgDescription2"
          placeholder="输入图片描述"
        />
        <img class="imgStyle" :src="imagePath2" alt="" />
        <input type="file" @change="uploadImage2" />
      </div>
      <!-- 提交样式 -->
      <div class="commitBox">
        <el-button type="success" @click="produceImg">生成全景图</el-button>
      </div>
    </div>
  </div>
  <!-- 全景图实例 -->
  <div style="display: flex; flex-direction: column" v-if="!uploadImgShowHide">
    <div class="vr_container">
      <!-- 第一个全景图 ------------------------------------>
      <div class="viewerBox">
        <div id="viewer1"></div>
      </div>
      <!-- 第二个全景图 ------------------------------>
      <div class="viewerBox">
        <div id="viewer2"></div>
      </div>
    </div>
    <div class="imgReSelect">
      <el-button type="success" @click="go_back">重新选择图片</el-button>
    </div>
  </div>
</template>

<script setup>
import * as PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers"
import "photo-sphere-viewer/dist/plugins/markers.css"

import { onMounted, ref, reactive, nextTick } from "vue"
import { ElMessage } from 'element-plus'

onMounted(() => {
  // initViewer()
})

// 获取父节点
var parent = document.getElementsByClassName("vr_container")
// 获取要删除的子节点
var child = document.getElementsByClassName("viewerBox")

const uploadImgShowHide = ref(true)

const imgDescription1 = ref('')
const imagePath1 = ref('')
const imgList1 = reactive([
  {
    title: '',
    imgUrl: '',
    // imgUrl: '/src/assets/image/livingRoom.jpg'
  },
  // {
  //   title: '',
  //   imgUrl: '/src/assets/image/kitchen.jpg'
  // }
])
const imgDescription2 = ref('')
const imagePath2 = ref('')
const imgList2 = reactive([
  {
    title: '',
    imgUrl: '',
    // imgUrl: '/src/assets/image/livingRoom.jpg'
  },
  // {
  //   title: '',
  //   imgUrl: '/src/assets/image/kitchen.jpg'
  // }
])



// 上传第一个全景图 
const uploadImage1 = (event) => {
  const file = event.target.files[0]
  console.log('第一个全景图file1', file)
  if (!file) return
  // 使用URL.createObjectURL获取到图片URL
  imagePath1.value = URL.createObjectURL(file)
  imgList1[0].imgUrl = imagePath1.value
}
// 上传第二个全景图 
const uploadImage2 = (event) => {
  const file = event.target.files[0]
  console.log('第二个全景图file2', file)
  if (!file) return
  // 使用URL.createObjectURL获取到图片URL
  imagePath2.value = URL.createObjectURL(file)
  imgList2[0].imgUrl = imagePath2.value
}

// 生成全景图
const produceImg = () => {
  imgList1[0].title = imgDescription1.value
  imgList2[0].title = imgDescription2.value

  if (!imagePath1.value && !imagePath2.value) {
    ElMessage({
      message: '请上传图片',
      type: 'error',
      showClose: true,
      center: true,
    })
  } else {
    uploadImgShowHide.value = false
    nextTick(() => {
      //加载全景图
      initViewer()
    })
  }
}
// 返回 重新上传
const go_back = () => {
  uploadImgShowHide.value = true
}



// photo-sphere-viewer实例方法
const initViewer = () => {

  // 配置项
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer1'),//容器
    panorama: imgList1[0].imgUrl,//初始图片全景图
    // size: {
    //   width: '100%',
    //   height: '100%'
    // },
    caption: imgList1[0].title,//标题
    loadingTxt: "加载中...", //加载时显示
    defaultZoomLvl: 0, //初始缩放 介于0-100之间
    // navbar: [],//底部配置项 不写默认全部
    plugins: [
      [MarkersPlugin, {
        markers: [//标记点配置 根据具体情况配置（可以直接配置，也可以后面调用addMarker添加）
          {
            id: 'img1_1',//唯一id 
            tooltip: '进入主客厅', //提示内容
            longitude: 2.739,
            latitude: -0.056,
            visible: false, // 标注初始显示与否
            html: "<image style='width:50px;height:50px' src='/src/assets/target.png'></image>",
            //  anchor: 'center right',
            // content: "侧边栏显示的内容", //点击标记后侧边栏显示内容

          },
          {
            id: 'img1_2',//唯一id
            tooltip: "进入厨房", //提示的内容
            longitude: 3.805,
            latitude: -0.105,
            visible: false, // 标注初始显示与否
            html: "<image style='width:50px;height:50px' src='/src/assets/target.png'></image>",
          },
        ],
      }],
    ],
  })
  var viewer2 = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer2'),
    panorama: imgList2[0].imgUrl,//初始图片全景图
    caption: imgList2[0].title,//标题
    loadingTxt: "加载中...", //加载时显示
    defaultZoomLvl: 0, //初始缩放 介于0-100之间
    navbar: [],//底部配置项 不写默认全部
    navbar: [
      {
        id: 'my-button',
        content: '<svg...>',
        title: 'Hello world',
        className: 'custom-button',
        onClick: (viewer) => {
          alert('Hello from custom button')
        },
      },
      'caption',
      'fullscreen',
    ],
    plugins: [
      [MarkersPlugin, {
        markers: [//标记点配置 根据具体情况配置（可以直接配置，也可以后面调用addMarker添加）
          // {
          //   id: 'img2_1',//唯一id 
          //   tooltip: '进入主客厅', //提示内容
          //   longitude: 2.739,
          //   latitude: -0.056,
          //   visible: false, // 标注初始显示与否
          //   html: "<image style='width:50px;height:50px' src='/src/assets/target.png'></image>",
          //   //  anchor: 'center right',
          //   // content: "侧边栏显示的内容", //点击标记后侧边栏显示内容

          // },
          // {
          //   // https://img0.baidu.com/it/u=20273554,3632725321&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500
          //   id: 'img2_2',//唯一id
          //   tooltip: "进入厨房", //提示的内容
          //   longitude: 3.805,
          //   latitude: -0.105,
          //   visible: false, // 标注初始显示与否
          //   html: "<image style='width:50px;height:50px' src='/src/assets/target.png'></image>",
          // },
        ],
      }],
    ],
  })
  // 初始化之后，可以使用getPlugin方法获得插件实例，从而允许在插件上调用方法并订阅事件
  const markersPlugin = viewer.getPlugin(MarkersPlugin)
  const markersPlugin2 = viewer2.getPlugin(MarkersPlugin)

  // 第一个实例的标记点操作事件
  markersPlugin.on("select-marker", (e, marker) => {
    console.log('marker', marker)
    viewer.animate({
      //当前标记点的位置
      longitude: marker.config.longitude,
      latitude: marker.config.latitude,
      //动画缩放层级
      zoom: 100,
      //动画速度
      speed: "-5rpm",
    }).then(() => {
      markersPlugin.hideMarker(marker.id)//隐藏点击的marker
      // viewer.rotate({ x: 500, y: 1200, })//改变摄像机的位置

      if (marker.id == 'img1_2') {
        viewer.setPanorama(imgList1[1].imgUrl).then(() => {
          // markersPlugin.showMarker('img1_1')//显示你需要显示的marker
        })
        // 第二张图跟随第一张切换场景
        viewer2.setPanorama(imgList2[1].imgUrl)
      }

      // 回到主客厅
      if (marker.id == 'img1_1') {
        viewer.setPanorama(imgList1[0].imgUrl).then(() => {
          // markersPlugin.showMarker('img1_2')//显示你需要显示的marker
        })
        // 第二张图跟随第一张切换场景
        viewer2.setPanorama(imgList2[0].imgUrl)
      }
      viewer.zoom(0)//改变缩放
      // viewer.toggleAutorotate()//开启自动旋转
    })

  })

  // 第二个实例的标记点操作事件
  // markersPlugin2.on("select-marker", (e, marker) => {
  //   console.log('marker', marker.id)
  //   viewer2.animate({
  //     //当前标记点的位置
  //     longitude: marker.config.longitude,
  //     latitude: marker.config.latitude,
  //     //动画缩放层级
  //     zoom: 100,
  //     //动画速度
  //     speed: "-2rpm",
  //   }).then(() => {
  //     markersPlugin2.hideMarker(marker.id)//隐藏点击的marker
  //     // viewer.rotate({ x: 500, y: 1200, })//改变摄像机的位置

  //     if (marker.id == 'img2_2') {
  //       viewer2.setPanorama(imgList2[1].imgUrl).then(() => {
  //         markersPlugin2.showMarker('img2_1')//显示你需要显示的marker
  //       })
  //     }

  //     // 回到主客厅
  //     if (marker.id == 'img2_1') {
  //       viewer2.setPanorama(imgList2[0].imgUrl).then(() => {
  //         markersPlugin2.showMarker('img2')//显示你需要显示的marker
  //       })
  //     }
  //     viewer2.zoom(0)//改变缩放
  //   })
  // })









  //监听当前的经纬度
  // 第一张图经纬度带动第二张经纬度变化
  viewer.on('position-updated', (e, position) => {
    console.log(`最新的经纬度: ${position.longitude} latitude: ${position.latitude}`)
    viewer2.animate({
      longitude: position.longitude,
      latitude: position.latitude,
      speed: "-10000000rpm",
    })
  })


  // 监听放大缩小
  viewer.on('zoom-updated', (e, level) => {
    console.log('最新的放大缩小', level)
    // 第一张图zoom带动第二张图zoom
    viewer2.zoom(level)//改变缩放
  })

  //点监听全图点击事件
  viewer.on('click', (e, data) => {
    console.log(`${data.rightclick ? '鼠标右键点击 ' : '鼠标左键点击'}点击经度: ${data.longitude} 点击纬度: ${data.latitude}`)
  })
  viewer2.on('click', (e, data) => {
    console.log(`${data.rightclick ? '鼠标右键点击 ' : '鼠标左键点击'}点击经度: ${data.longitude} 点击纬度: ${data.latitude}`)
  })


}


</script>
<style  scoped lang="scss">
.upload_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .uploadBox {
    width: 50%;
    margin-top: 100px;
    border: 1px dashed #999;
    display: flex;
    align-items: center;
    // 上传图片和预览样式
    .uploadStyle {
      display: flex;
      flex-direction: column;
      align-items: center;
      input {
        width: 70px;
        height: 36px;
      }
      .imgStyle {
        width: 200px;
        height: 200px;
        border: 1px dashed #999;
        margin: 20px;
      }
    }
    // 提交样式
    .commitBox {
      display: flex;
      flex-direction: column;
      margin-left: 100px;
    }
  }
}
.vr_container {
  display: flex;
  justify-content: space-between;
  .viewerBox {
    #viewer1 {
      width: 49.5vw;
      height: 95vh;
    }
    #viewer2 {
      width: 49.5vw;
      height: 95vh;
    }
  }
}
.imgReSelect {
  margin-top: 10px;
}
</style>

